/*
Copyright (c) 2019 the Octant contributors. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
*/

// This value should match the value used for the animations in 'slide-in-out.animations.ts'
$statusContentHeight: 12rem;
$tabsHeight: 2rem;

.status-view {
  position: fixed;
  width: 100vw;
  height: $statusContentHeight;
  left: 0;
  z-index: 501;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 1;

  // TODO: delete this. host-context isn't used in all browsers
  // Status's color variables for Light Theme.
  :host-context(body) {
    --slider-background-color: white;
  }

  // Status's color variables for Dark Theme.
  :host-context(body.dark) {
    --slider-background-color: #0d151b;
  }

  &--trigger {
    position: absolute;
    height: 36px;
    right: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;

    &:hover {
      color: #49afd8;
    }

    clr-icon {
      &.in {
        transform: rotate(180deg);
      }
    }
  }

  &--content {
    height: $statusContentHeight;
    width: 100%;
    background-color: var(--slider-background-color);
    border-top: 2px solid rgb(215, 215, 215);
  }
}
